<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/mimu.css">
</head>
<body>
<!--    顶部栏-->
    <div class="topBar">
        <div class="container">
            <div class="topBar_list">
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">loT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">金融</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">企业服务</a>
                <span>|</span>
                <a href="#">资质证明</a>
                <span>|</span>
            </div>
            <div class="shop">
                <a href="#">
                    <i class="iconfont">&#xe601;</i>
                    图标购物车
                </a>
            </div>
            <div class="login">
                <a href="#">登陆</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">消息通知</a>
                <span>|</span>
            </div>
        </div>
    </div>
<!--    导航栏-->
    <div class="header">
        <div class="container">
            <div class="site_logo">
                <a href="#">
                    <img src="images/logo.png" alt="">
                </a>
            </div>
            <div class="site_list">
                <ul class="classfix">
                    <li class="site_category">
                        <a href="">全部商品分类</a>
                        <div class="category_list">
                            <ul>
                                <li>
                                    <a href="#">
                                        手机卡 电话卡
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        电视 盒子
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        笔记本 平板
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        家电 插电板
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        出行 穿搭
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        智能 路由器
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        电源 配件
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        健康 儿童
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        耳机 音响
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        生活 箱包
                                        <span class="iconfont">&#xe649;</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="">
                        <a href="">小米手机</a>
                    </li>
                    <li class="">
                        <a href="">红米</a>
                    </li>
                    <li class="">
                        <a href="">电视</a>
                    </li>
                    <li class="">
                        <a href="">笔记本</a>
                    </li>
                    <li class="">
                        <a href="">家电</a>
                    </li>
                    <li class="">
                        <a href="">新品</a>
                    </li>
                    <li class="">
                        <a href="">路由器</a>
                    </li>
                    <li class="">
                        <a href="">智能硬件</a>
                    </li>
                    <li class="">
                        <a href="">服务</a>
                    </li>
                    <li class="">
                        <a href="">社区</a>
                    </li>
                </ul>
            </div>
            <div class="site_search">
                <form action="">
                    <input type="text" name="shop" class="search_text">
                    <input type="submit" class="search_bnt iconfont" value="&#xe67a;" style="font-size: 20px">
                    <div class="site_default_search">
                        <a href="#">小米10</a>
                        <a href="#">小米10 SE</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
<!--    主页内容-->
    <div class="site_content">
        <div class="container">
<!--            轮播图及周边的效果-->
            <div class="site_slider">
                <a href="#">
                    <img src="images/008.jpg" alt="">
                </a>
                <span class="next"></span>
                <span class="prev"></span>
                <div class="site_item">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
<!--            向导-->
            <div class="content_sub">
<!--                左向导-->
                <div class="content_channel">
                    <ul class="channel_list clearfix">
                        <li>
                            <a href="#" >
                                <i class="iconfont">&#xe611;</i>
                                选购手机
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe6c9;</i>
                                企业团购
                            </a>
                        </li>
                        <li>
                            <a href="#" >
                                <i class="iconfont">&#xe600;</i>
                                F码通道
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe606;</i>
                                米粉卡
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe658;</i>
                                以旧换新
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe608;</i>
                                话费充值
                            </a>
                        </li>
                    </ul>
                </div>
<!--                右向导-->
                <div class="content_list">
                    <ul class="center_picture clearfix">
                        <li>
                            <a href="#">
                                <img src="images/009.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/010.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/011.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content_banner">
            <div class="container">
                <a href="#">
                    <img src="images/012.webp" alt="">
                </a>
            </div>
        </div>
    </div>
<!--    内容详情-->
    <div class="content_desc">
        <div class="container">
<!--            标题-->
            <div class="box_hd">
                <h2 class="box_hd_title">手机</h2>
                <div class="more">
                    <a href="#">
                        查看全部
                        <i class="iconfont">&#xe649;</i>
                    </a>
                </div>
            </div>
<!--            内容-->
            <div class="box-bd">
                <div class="row clearfix">
<!--                    左边-->
                    <div class="row-l">
                        <a href="#">
                            <img src="images/013.webp" alt="">
                        </a>
                    </div>
<!--                    右边-->
                    <div class="row-r">
                        <ul>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        Note 10 Pro
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 100GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 100GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 100GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 100GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 100GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 100GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li>
<!--                                图像-->
                                <div class="figure">
                                    <a href="#">
                                        <img src="images/note10pro.webp" alt="">
                                    </a>
                                </div>
<!--                                标题-->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 100GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑1100年度旗舰芯，VC液冷散热
                                </p>
                                <p class="price">
                                    <span class="num">2000</span>元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-figure">
            <div class="container">
                <a href="#">
                    <img src="images/014.webp" alt="">
                </a>
            </div>
        </div>
    </div>


<!--    网站脚步-->
    <div class="footer">
        <div class="container">
            <div class="footer-service clearfix">
                <ul>
                    <li class="first">
                        <a href="#">
                            <i class="iconfont">&#xe61c;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe61c;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe61c;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe61c;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe61c;</i>
                            预约维修服务
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links clearfix">
                <div class="col-links">
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">帮助中心</a></dd>
                    </dl>
                </div>
                <div class="col-contact">
                    <p class="iphone">400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#">
                        <i class="iconfont">&#xe611;</i>
                        联系客服
                    </a>
                </div>
            </div>
        </div>
    </div>


</body>
</html>